<template>
  <div class="doctor-select-list">
    <div class="doctor-select-header">
      <input
        class="doctor-search-input"
        v-model="formData.doctorName"
        @input="getRemainListApi()"
        placeholder="搜索医生"
      />
      <span class="doctor-search-icon"> </span>
    </div>
    <div class="doctor-select-table">
      <div style="width: 30%">
        <div
          class="doctor-dept"
          :class="deptId == item.deptId ? 'doctor-dept1' : ''"
          v-for="(item, idx) in doctorLists"
          :key="item.deptId"
          @click="selectDeptId(item.deptId, item)"
        >
          {{ item.deptName }}
        </div>
      </div>
      <div style="flex: 1">
        <div
          v-for="(item, index) in doctorLists2"
          :key="index"
          class="doctor-row"
          @click="select(item)"
        >
          <span class="doctor-name">
            {{ item.doctorName }}
            <img
              v-if="item.remainCount > 0"
              class="doctor-status ok"
              src="@/assets/icon/icon_keguahao.svg" /><img
              class="doctor-status pause"
              v-else
              src="@/assets/icon/icon_bukeguahao.svg"
          /></span>
          <span class="doctor-title">{{ item.title }}</span>
          <span class="doctor-rest">余 {{ item.remainCount }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { addRegister, getRemainList } from '@/api/registerList';
import dayjs from 'dayjs';
import store from '@/store';
const props = defineProps<{
  modelValue?: number;
  time?: string;
}>();
const emit = defineEmits(['update:modelValue', 'select']);

const deptId = ref(0);
const doctorLists: any = ref([]);
const doctorLists2: any = ref([]);
const name = ref('');
const formData = ref({
  doctorName: '',
  visitDate: props.time || dayjs(new Date()).format('YYYY-MM-DD'),
});

const selectDeptId = (id: any, row: any) => {
  name.value = row.deptName;
  deptId.value = id;

  doctorLists.value.forEach((element: any) => {
    if (id == element.deptId) {
      doctorLists2.value = element.remainList || [];
    }
  });

  //console.log(doctorLists2.value);
};
//获取医生当日挂号统计
const getRemainListApi = async () => {
  let res = await getRemainList(formData.value);
  if (res.code != '200') {
    return;
  }
  //console.log(res.data);
  doctorLists.value = res.data;
  deptId.value = res.data[0].deptId || 0;
  doctorLists2.value = res.data[0].remainList || [];
};
getRemainListApi();

function select(info: any) {
  // if (info.remainCount <= 0) {
  //   // ElMessage.error('该医生无剩余号源')

  //   // store.dispatch('message/show', {
  //   //   type: 'error',
  //   //   message: '该医生无剩余号源',
  //   // });
  //   return;
  // }

  let infos = { ...info };
  infos.deptName = name.value;
  emit('select', infos);
}
</script>

<style scoped lang="scss">
.doctor-select-list {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #e6e6e6;
  padding: 0 0 8px 0;
  width: 360px;
  overflow: auto;
  height: 168px;
}
.doctor-select-header {
  display: flex;
  align-items: center;
  padding: 8px 12px 0 12px;
  border-bottom: 1px solid #f0f0f0;
}
.doctor-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #bbb;
  padding: 6px 0;
}
.doctor-search-icon {
  margin-left: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doctor-select-table {
  width: 100%;
  display: flex;
  margin-top: 2px;
}
.doctor-row {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 36px;
  font-size: 13px;
  justify-content: flex-start;
  cursor: pointer;
  transition: background 0.2s;
  border-top: 1px solid #dcdcdc;
}
.doctor-row:last-child {
  border-bottom: 1px solid #dcdcdc;
}
.doctor-row.selected {
  background: #e6f7f5;
}
.doctor-row:hover {
  background: #f7f8fa;
}
.doctor-dept {
  color: #222;
  cursor: pointer;
  font-weight: 600;
  width: 100%;
  height: 36px;
  background: #f8f9faff;
  border-radius: 0px 0px 0px 0px;
  text-align: center;
  border-top: 1px solid #dcdcdc;
}
.doctor-dept:last-child {
  border-bottom: 1px solid #dcdcdc;
}
.doctor-dept1 {
  background: rgba(22, 173, 164, 0.08);
}
.doctor-name {
  width: 90px;
  color: #222;
  font-weight: 500;
  align-items: center;
  display: flex;
  align-items: center;
}
.doctor-status {
  margin-left: 4px;
  display: inline;
}
.doctor-status.ok img {
  width: 18px;
  height: 18px;
}
.doctor-status.pause img {
  width: 18px;
  height: 18px;
}
.doctor-title {
  width: 90px;
  color: #888;
  font-size: 13px;
}
.doctor-rest {
  width: 50px;
  color: #bdbdbd;
  font-size: 13px;
}
</style>
